<template>
  <picker
    :disabled="disabled"
    mode="time"
    :value="value"
    @change="bindDateChange"
  >
    <view>{{ value != null ? dateStr : "无" }}</view>
  </picker>
</template>
<script>
export default {
  name: "LiTimePicker",
  props: {
    value: {},
    disabled: {
      type: Boolean,
      default: false,
    },
    second: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    dateStr() {
      const d = new Date(this.value);
      return this.value
        ? this.value.split(":")[0] +
            "时" +
            this.value.split(":")[1] +
            "分" +
            (this.second ? `${this.value.split(":")[2]}秒` : "")
        : "";
    },
  },
  methods: {
    bindDateChange(e) {
      this.$emit("input", e.detail.value);
    },
  },
};
</script>
